<template>
	<div>
		<div class="module-title">陈列区域</div>
		<div class="component-list">
			<div
				v-for="icon in bigAreaShapeData"
				draggable="true"
				:title="icon.bigAreaName"
				class="componentItem"
        @dragstart="onDragStart($event, icon, 'bigArea')"
			>
				<div class="shape-rect"></div>
				<div class="name">{{ icon.bigAreaName }}</div>
			</div>
		</div>
		<div class="module-title">陈列器材</div>
		<div class="component-list">
			<div
				v-for="icon in equipmentModelListData"
				draggable="true"
				:title="icon.equipmentName"
				class="componentItem"
        @dragstart="onDragStart($event, icon, 'equipment')"
			>
				<div class="shape-rect"></div>
				<div class="name">{{ icon.equipmentName }}</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import shapeData from "../mock/shapeData";

const { bigAreaModelList, equipmentModelList} = shapeData
const bigAreaShapeData = ref(bigAreaModelList);
const equipmentModelListData = ref(equipmentModelList);
const onDragStart = (e: any, data:any, type: 'bigArea' | 'equipment') => {
	let curComponent = {}
	const bigAreaBaseConfig = {
		background: 'rgba(204, 204, 204, 0.2)',
		color: '#CCCCCC',
	}
	const equipmentBaseConfig = {
		background: 'rgba(94, 190, 113, 0.4)',
		color: '#5EBE71',
	}
	const  {length, width} = data
	const copyData = {...data}
	copyData.width = length * 100 / 2
	copyData.height = width * 100 / 2
	copyData.name = 'rectangle'
	copyData.text = data.bigAreaName || data.equipmentName
	delete copyData.length
	if(type === 'bigArea'){
		curComponent = {...bigAreaBaseConfig, ...copyData}
	}
	if(type === 'equipment') {
		curComponent = {...equipmentBaseConfig, ...copyData}
	}
	console.log(curComponent)
  e.dataTransfer.setData("Topology", JSON.stringify(curComponent));
};
</script>
<style scoped lang="less">
.module-title {
	padding: 10px;
	color: #415058;
	border-top: 1px solid #dedee4;
	border-bottom: 1px solid #dedee4;
	font-size: 12px;
}
.component-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-flow: row wrap;
	padding: 12px 4px 0 12px;
	max-height: 300px;
	overflow-y: auto;
	.componentItem {
		width: 74px;
		/* height: 42px; */
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		background: #f8fafc;
		color: #666666;
		border-radius: 4px;
		margin-bottom: 8px;
		margin-right: 8px;
		cursor: pointer;
		position: relative;
	}
	.shape-rect {
		width: 20px;
		height: 20px;
		border: 1px solid #000;
	}
	.name {
		font-size: 12px;
	}
}
</style>
